<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../css/public-head.css" />
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" href="../css/mui.css" />
		<link rel="stylesheet" type="text/css" href="../css/demo2.css"/>
		<style>

		</style>
	</head>

	<body>
		<div class="main">
			<!--车型-->
			<div class="car-type">
				<div>选择车型</div>
				<div id="motorcycle_1">
					<div class="carBtn">
						<div><img src="../image/icon/ddxiaojc@2x.png" alt="" /></div>
						<div><span><img class="carbtn-img" src="../image/icon/GX1@2x.png" alt="" /></span>小轿车</div>
					</div>
					<div class="carBtn">
						<div><img src="../image/icon/ddSUV@2x.png" alt="" /></div>
						<div><span><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></span>SUV、七座型</div>
					</div>
				</div>
			</div>
			<!--选择服务-->
			<div class="seve">
				<div class="seveInfo">洗车</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥59</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							深度精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥129</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
			</div>
			<!--内饰-->
			<div class="seve">
				<div class="seveInfo">内饰</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥59</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							深度精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥129</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
			</div>
			<!--漆面-->
			<div class="seve">
				<div class="seveInfo">漆面</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥59</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							深度精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥129</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
			</div>
			<!--其他-->
			<div class="seve">
				<div class="seveInfo">其他</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥59</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							深度精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥129</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
			</div>
			<!--活动套餐-->
			<div class="seve">
				<div class="seveInfo">活动套餐</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥59</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
				<div class="seveContent">
					<div class="seveItem">
						<div class="itemImg">
							<img src="../image/homepage/sy-yjxc.png" />
						</div>
						<div>
							深度精洗
						</div>
					</div>
					<div class="seveItem">
						<div class="price">￥129</div>
						<div class="select_Img"><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></div>
					</div>
				</div>
			</div>
				<!--按钮-->
				<div class='next-button-view'>
					<button class='next-button' onclick='nextClick()'>请选择</button>
				</div>
			</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/public-head.js"></script>
	<script type="text/javascript" src="../script/mui.js"></script>
	<script src="../script/template-web.js"></script>
	<script type="text/javascript">
		//头部
		headInner({
			title: "服务内容",
			//headleft
			headl: '<a href="#" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
			//headright
			headr: '<a style="color:white"></a>',
			color: "", //默认是蓝色
			padding: "0px 0px 0px",
		})
		apiready = function() {
			var shop_id = api.pageParam.shop_id;
			// 获取车型
			fnMotorcycleType();
		};

		//获取车型
		function fnMotorcycleType() {
//			BASE.MYajax({
//				'pathName': 'home/getCarType',
//				'method': ofVehicleType //调用函数
//			});
		};

		function ofVehicleType(ret, err) {
			if(ret.code == 200) {
				var html = template('motorcycle_2', ret);
				document.getElementById('motorcycle_1').innerHTML = html;
				// 默认服务
				Getdefault_ser();
			}
		};
		// 默认选择车型服务项目
		function Getdefault_ser() {
			var check_img = $api.domAll($api.byId('motorcycle_1'), ".carbtn-img");
			for(var i = 0; i < check_img.length; i++) {
				if(check_img[i].getAttribute('src').indexOf('../image/icon/WGX1@2x.png') > -1) {
					fnServiceBtn(i, api.pageParam.pid)
				}
			}
		};
		//根据车型获取选择服务
		function fnServiceBtn(serviceType, ser_pid) {
			console.log(serviceType);
			console.log(ser_pid);
			typeId = serviceType;
//			BASE.MYajax({
//				'pathName': 'userCar/projects',
//				// 'methods': 'get',
//				'ajaxData': {
//					values: {
//						type_id: serviceType,
//						pid: ser_pid
//					}
//				},
//				'method': realData //调用函数
//			});
		};

		function realData(ret, err) {
			// alert(ret);
			console.log("洗车洗车啦" + JSON.stringify(ret));
			if(ret.code == 200) {
				var html = template('serviceBtn', ret);
				document.getElementById('service_btn').innerHTML = html;
			} else {
				reToast(ret, err)
			}
		}

		function nextClick(){
			api.openWin({
				name: 'demo3',
				url: '../html/demo3.html'
			});
		}
	</script>

</html>
